<template>
  <div class="session-wrap">
    <div class="banner-top">
      <p class="banner-title">上传顶部三张图片</p>
      <el-upload
        class="upload-demo"
        :action="imgUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList1"
        :on-success="uploadSuccess1"
        list-type="picture"
        :limit="3"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <p class="banner-title">二张图名称</p>
      <el-input
        v-model="moduleData.variables.top[0].text"
        placeholder="第一张图名称"
        class="banner-input"
      ></el-input>
      <el-input
        v-model="moduleData.variables.top[1].text"
        placeholder="第二张图名称"
        class="banner-input"
      ></el-input>
      <el-input
        v-model="moduleData.variables.top[2].text"
        placeholder="第三张图名称"
        class="banner-input"
      ></el-input>
      <p class="banner-title">二张图链接</p>
      <el-input
        v-model="moduleData.variables.top[0].url"
        placeholder="第一张图链接"
        class="banner-input"
      ></el-input>
      <el-input
        v-model="moduleData.variables.top[1].url"
        placeholder="第二张图链接"
        class="banner-input"
      ></el-input>
      <el-input
        v-model="moduleData.variables.top[2].url"
        placeholder="第三张图链接"
        class="banner-input"
      ></el-input>
    </div>
    <div class="banner-top">
      <p class="banner-title">上传底部二张图片</p>
      <el-upload
        class="upload-demo"
        :action="imgUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList2"
        :on-success="uploadSuccess2"
        list-type="picture"
        :limit="2"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <p class="banner-title">二张图名称</p>
      <el-input
        v-model="moduleData.variables.bottom[0].text"
        placeholder="第一张图名称"
        class="banner-input"
      ></el-input>
      <el-input
        v-model="moduleData.variables.bottom[1].text"
        placeholder="第二张图名称"
        class="banner-input"
      ></el-input>
      <p class="banner-title">二张图链接</p>
      <el-input
        v-model="moduleData.variables.bottom[0].url"
        placeholder="第一张图链接"
        class="banner-input"
      ></el-input>
      <el-input
        v-model="moduleData.variables.bottom[1].url"
        placeholder="第二张图链接"
        class="banner-input"
      ></el-input>
    </div>
    <el-button type="primary" class="banner-button" @click="commit"
      >主要按钮</el-button
    >
  </div>
</template>
<script>
// 引入资源
export default {
  name: "session",
  props: {
    bannerObject: {
      type: Object,
      default: () => {
        return {
          top: [
            {
              img: "",
              text: "",
              url: "",
            },
            {
              img: "",
              text: "",
              url: "",
            },
            {
              img: "",
              text: "",
              url: "",
            },
          ],
          bottom: [
            {
              img: "",
              url: "",
            },
            {
              img: "",
              url: "",
            },
          ],
        };
      },
    },
    moduleData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      imgUpload: this.utils.imgUploadUrl,
      fileList1: [],
      fileList2: [],
      imgUrlList1: [],
      imgUrlList2: [],
      // bannerObject:
    };
  },
  mounted() {
    if (this.moduleData.variables == "") {
      this.moduleData.variables = {
        top: [
          {
            img: "",
            text: "",
            url: "",
          },
          {
            img: "",
            text: "",
            url: "",
          },
          {
            img: "",
            text: "",
            url: "",
          },
        ],
        bottom: [
          {
            img: "",
            url: "",
          },
          {
            img: "",
            url: "",
          },
        ],
      };
    }
  },

  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      this.fileList.push();
    },
    uploadSuccess1(response) {
      console.log(response);
      if (response.code == "0000") {
        this.imgUrlList1.push(response.data.imageUrl);
      }
    },
    uploadSuccess2(response) {
      console.log(response);
      if (response.code == "0000") {
        this.imgUrlList2.push(response.data.imageUrl);
      }
    },
    commit() {
      console.log(this.moduleData);

      for (let i = 0; i < this.imgUrlList1.length; i++) {
        this.moduleData.variables.top[i].img = this.imgUrlList1[i];
      }

      for (let i = 0; i < this.imgUrlList2.length; i++) {
        this.moduleData.variables.bottom[i].img = this.imgUrlList2[i];
      }

      let params = {};
      params.templateDataType = 0;
      params.moduleId = this.moduleData.cmsModuleId;
      params.platform = 2;

      params.variablesObject = this.moduleData.variables;

      console.log(params.variablesObject);
      this.utils.request.cmsPageModuleAddModuleData(params, (res) => {
        if (res.code === "0000") {
          this.$emit("getIndex");
          this.$message({ message: "保存成功", type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.banner-title {
  padding: 16px 0;
  font-size: 18px;
  font-weight: bold;
}
.banner-top {
  height: auto;
  border: 1px solid #eee;
  padding: 0px 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.banner-input {
  margin-bottom: 12px;
}

.banner-button {
  margin-top: 20px;
}
</style>
